import { Key, useEffect, useState } from "react";
import { useModel } from "../factory";
import { useProTable } from "../useTable";
import { SysUserGroup } from '@sker/model'
import { Button, Card, Dropdown, Modal, Popconfirm } from "antd";
import { PlusOutlined } from '@ant-design/icons'
import { ProTable } from "@ant-design/pro-components";
import { useModal } from "../useModal";
import { useForm } from "../useForm";
import { BetaSchemaForm } from "@ant-design/pro-form";
export const UserGroupSelector: React.FC<{ multi?: boolean, value?: Key[], onSelect?: (record: any[]) => void }> = ({ multi, value, onSelect }) => {
    const model = useModel(SysUserGroup)
    const { props: proTableProps, selectedRows, actionRef, setSelectedRowKeys, setSelectedRows } = useProTable(multi ? 'checkbox' : 'radio', value);
    const [editRecord, setEditRecord] = useState<any>()
    const { props: modalProps, setOpen } = useModal(`添加用户组`);
    const { props: formProps, form } = useForm([
        { title: '组名', dataIndex: 'title', formItemProps: { rules: [{ required: true, message: '组名必填' }] } },
    ], async (values) => {
        await model.create(values, ['id'])
        actionRef.current?.reload();
        setEditRecord(null);
        setOpen(false)
    })
    useEffect(() => {
        if(!editRecord){
            form.resetFields();
        }
        form.setFieldsValue(editRecord)
    }, [editRecord])
    useEffect(() => {
        onSelect(selectedRows)
    }, [selectedRows])
    return <>
        <Modal {...modalProps}>
            <BetaSchemaForm {...formProps} />
        </Modal>
        <Card title={'用户组列表'} extra={
            <Button type={'primary'} icon={<PlusOutlined />} size={'small'} onClick={e => {
                setEditRecord(null)
                setOpen(true)
            }}></Button>
        }>
            <ProTable {...proTableProps} rowKey={record => record.id} columns={[
                { title: '组名', dataIndex: 'title' },
                {
                    title: '操作',
                    hideInSearch: true,
                    align: 'right',
                    render: (dom, entity, index, action, schema) => {
                        return <>
                            <Button size={'small'} type={'link'} onClick={e => {
                                setOpen(true)
                                setEditRecord(entity)
                            }}>编辑</Button>
                            <Popconfirm onConfirm={async e => {
                                await model.delete(entity.id)
                                await actionRef.current?.reload();
                            }} title={'此操作不可逆!您确定要执行此操作吗？'} description={'删除后无法恢复，请慎重操作！！'}>
                                <Button size={'small'} type={'link'} danger >删除</Button>
                            </Popconfirm>
                        </>
                    }
                }
            ]} request={async () => {
                return model.find(['id', 'title'], [], [
                    { field: 'create_date', order: 'desc' },
                ]).then(res => {
                    return res;
                })
            }} />
        </Card>
    </>
}